<template>
	<div class="row">
		<div class="row justify-content-end" style="padding: 10px;">
			<a @click="$router.back(-1)" class="btn btn-primary" type="button" style="width: 100px;">返回</a>
		</div>
		<img v-if="book.bookImg != null" :src="imgPath + book.bookImg" class="col-4">
		<ul class="list-group list-group-flush col-8">
			<li class="list-group-item">
				<h2>{{book.bookName}}</h2>
			</li>
			<li class="list-group-item">{{book.bookAuthor}}</li>
			<li class="list-group-item">分类：{{book.bookClassName}}</li>
			<li class="list-group-item">ISBN：{{book.bookIsbn}}</li>
			<li class="list-group-item">库存：{{book.bookQuantity}}</li>
			<li class="list-group-item">简介：{{book.bookText}}</li>
			<li class="list-group-item">
				<a type="button" class="btn btn-outline-primary" @click="borrowBook(book.bookId, book.bookQuantity)"
					v-if="book.bookQuantity > 0">借阅</a>
				<a type="button" class="btn btn-danger disabled"
					v-else>借阅</a>
			</li>
		</ul>
	</div>
</template>

<script>
	import {
		computed,
		reactive,
		toRefs,
		onMounted,
	} from "vue";
	import {
		useRouter,
		useRoute
	} from "vue-router";
	import {
		useStore,
	} from "vuex";
	import axios from "axios";

	export default {
		props: {
			//入口参数
		},
		components: {
			//引入组件
		},
		setup() {
			//实例化userouter
			const router = useRouter();
			const route = useRoute();
			const store = useStore();
			store.state.ifFrameShow = true;
			//onMounted()生命周期
			onMounted(() => {
				axios
					.get("QueryBook", {
						params: {
							id: route.query.id
						}
					})
					.then((response) => {
						data.book = response.data.data
					})
					.catch((error) => console.log(error)); // 请求失败处理
			});
			const data = reactive({
				imgPath: store.state.imageUrl,
				book: {},
				borrowBook: (bookId, q) => {
					if (q <= 0) {
						alert("无库存");
					} else {
						axios
							.post("Borrow?bookId=" + bookId)
							.then((response) => {
								alert(response.data.msg)
								axios
									.get("QueryBook", {
										params: {
											id: route.query.id
										}
									})
									.then((response) => {
										data.book = response.data.data
									})
									.catch((error) => console.log(error)); // 请求失败处理
							})
							.catch((error) => console.log(error)); // 请求失败处理
					}
				},
			});
			return {
				...toRefs(data),
			};
		},
	};
</script>


<style>

</style>
